<script setup lang="ts">
import type { FolderProps } from '@/types';

import { ref, watch } from 'vue';

import { Icon } from '@/components/core/icon';

import dayjs from 'dayjs';
import {
  type CheckboxValueType,
  ElButton,
  ElCheckbox,
  ElEmpty,
  ElSkeleton,
} from 'element-plus';

import { formatFileSize } from '@/utils';

defineOptions({
  name: 'FolderList',
});
const { sort, sortKey, list } = defineProps({
  loading: {
    default: false,
    type: Boolean,
  },
  sort: {
    default: () => ({}),
    type: Object,
  },
  sortKey: {
    default: 'name',
    type: String,
  },
  list: {
    default: () => [],
    type: Array<FolderProps>,
  },
});
const emits = defineEmits(['sortBy', 'itemDbClick', 'checkAll', 'resume']);
const chkAll = ref(false);

// 列头排序
const sortBy = (key: string) => {
  emits('sortBy', key);
};
const onItemDbClick = (item: FolderProps) => {
  emits('itemDbClick', item);
};
const onCheckAll = (val: CheckboxValueType) => {
  emits('checkAll', val);
};
const onResume = () => {
  emits('resume');
};
watch(
  () => list,
  (val) => {
    chkAll.value =
      val &&
      val.length > 0 &&
      !val.some((item) => {
        return !item.checked;
      });
  },
  { deep: true },
);
</script>
<template>
  <div class="layout-list">
    <table
      :class="{ 'h-full': list.length === 0 || loading }"
      class="hor-minimalist-b"
    >
      <colgroup>
        <col width="28" />
        <col width="auto" />
        <col width="160" />
        <col width="100" />
        <col width="100" />
      </colgroup>
      <thead>
        <tr>
          <th scope="col">
            <ElCheckbox v-model="chkAll" size="small" @change="onCheckAll" />
          </th>
          <th class="sort" scope="col" @click="sortBy('name')">
            <div class="th">
              名称
              <Icon
                v-if="sortKey === 'name'"
                :icon="
                  sort.name === 'asc'
                    ? `ri:arrow-down-s-line`
                    : `ri:arrow-up-s-line`
                "
              />
            </div>
          </th>
          <th class="sort" scope="col" @click="sortBy('time')">
            <div class="th">
              修改时间
              <Icon
                v-if="sortKey === 'time'"
                :icon="
                  sort.time === 'asc'
                    ? `ri:arrow-down-s-line`
                    : `ri:arrow-up-s-line`
                "
              />
            </div>
          </th>
          <th class="sort" scope="col" @click="sortBy('type')">
            <div class="th">
              类型
              <Icon
                v-if="sortKey === 'type'"
                :icon="
                  sort.type === 'asc'
                    ? `ri:arrow-down-s-line`
                    : `ri:arrow-up-s-line`
                "
              />
            </div>
          </th>
          <th class="sort" scope="col" @click="sortBy('size')">
            <div class="th">
              大小
              <Icon
                v-if="sortKey === 'size'"
                :icon="
                  sort.size === 'asc'
                    ? `ri:arrow-down-s-line`
                    : `ri:arrow-up-s-line`
                "
              />
            </div>
          </th>
        </tr>
      </thead>
      <tbody v-if="loading">
        <tr>
          <td class="text-center align-top" colspan="5">
            <ElSkeleton :rows="8" animated />
            <p class="mt-4 text-center text-gray-500">
              搜索耗时过长，建议修改关键词重新搜索
            </p>
            <ElButton
              class="mt-4"
              size="small"
              type="primary"
              @click="onResume"
            >
              取消
            </ElButton>
          </td>
        </tr>
      </tbody>
      <tbody v-else-if="list.length === 0">
        <tr>
          <td colspan="5">
            <ElEmpty description="此文件夹为空。" />
          </td>
        </tr>
      </tbody>
      <tbody v-else>
        <tr v-for="(item, index) in list" :key="index">
          <td class="checkbox">
            <ElCheckbox v-model="item.checked" size="small" />
          </td>
          <td>
            <div class="title">
              <Icon
                :class="item.type === '2' ? 'folder' : 'file'"
                :icon="item.icon"
                class="mr-2"
              />
              <div class="name" @dblclick="onItemDbClick(item)">
                {{ item.name }}
              </div>
            </div>
          </td>
          <td>
            {{ dayjs(item.mtime).format('YYYY-MM-DD HH:mm:ss') }}
          </td>
          <td>
            {{ item.type === '2' ? '文件夹' : '文件' }}
          </td>
          <td>
            {{ item.type === '2' ? '' : formatFileSize(item.size) }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
